<template>
  <div class="textarea">
    <h1>{{ qs }}</h1>
    <div class="input-image">
      <input id="file" type="file" @change="tirggerFile($event)" multiple="multiplt">
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        qs: "这是题目，请上传文件",
        headimgurl: "",
      };
    },
    methods: {
      tirggerFile(e) {
        this.headimgurl = new FormData(); // 创建一个form类型的数据
        this.headimgurl.append("headimgurl", e.target.files[0]); // 获取上传文件的数据
        // 往对象插入数据
        this.headimgurl.append("name", this.userInfo.name);
        this.headimgurl.append("paperwork_type", this.userInfo.paperwork_type);
        this.headimgurl.append("paperwork_num", this.userInfo.paperwork_num);
        this.headimgurl.append("phone", this.userInfo.phone);
        this.headimgurl.append("sex", sex);
        this.headimgurl.append("city", this.userInfo.city);
        this.headimgurl.append("area", this.userInfo.area);
        this.headimgurl.append("school", this.userInfo.school);
        this.headimgurl.append("grade", grade);

        axios.post("#", this.headimgurl).then((res) => {
          if (res.data.status === 1) {
            // 清空file的值
            var file = document.getElementById('file');
            file.outerHTML = file.outerHTML;
            // 重新获取数据
            this.information()
            alert(res.data.message)
          } else {
            alert(res.data.message)
          }
        })
      }
    }

  };
</script>

<style lang="less" scoped>
  .textarea {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #bbb;
    padding-bottom: 3vh;
    margin-top: 3vh;

    h1 {
      font-size: 15px;
      font-weight: 500;
      padding: 1vw;
      margin-left: 2vw;
    }

    .input-image {
      display: inline-block;
      margin-left: 2vw;
      width: 50px;
      height: 50px;
      background-image: url(../assets/images/++.png);

      input {
        width: 50px;
        height: 50px;
        background: #bbb;
        opacity: 0;

      }
    }



  }
</style>